<template>
  <div class="query-form">
    <div class="query-header">
      <el-form :model="form">
        <el-row justify="space-between">
          <el-form-item label="医疗机构" class="form-label">
            <el-select v-model="form.agency" placeholder="选择医疗机构">
              <el-option label="机构1" value="jigou1"/>
              <el-option label="机构2" value="jigou2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="药库" class="form-label">
            <el-select v-model="form.storage" placeholder="选择药库">
              <el-option label="药库1" value="yaoku1"/>
              <el-option label="药库2" value="yaoku2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="配送企业" class="form-label">
            <el-select v-model="form.enterprise" placeholder="选择配送企业">
              <el-option label="企业1" value="yaoku1"/>
              <el-option label="企业2" value="yaoku2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="类型" class="form-label">
            <el-select v-model="form.type" placeholder="选择类型">
              <el-option label="类型1" value="type1"/>
              <el-option label="类型2" value="type2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="产品编码" class="form-label">
            <el-input v-model="form.code" placeholder=""/>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="药品分类:" class="form-label">
            <el-radio-group v-model="form.classify">
              <el-radio label="1">药品类型</el-radio>
              <el-radio label="2">基药类型</el-radio>
              <el-radio label="3">采集类型</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="分类明细:" prop="subType" class="form-label">
            <el-checkbox-group v-model="form.subType" v-if="form.classify==='1'">
              <el-checkbox label="西药" name="subType"/>
              <el-checkbox label="中成药" name="subType"/>
              <el-checkbox label="中药饮片" name="subType"/>
              <el-checkbox label="经二类" name="subType"/>
              <el-checkbox label="自制药剂" name="subType"/>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.subType" v-else-if="form.classify==='2'">
              <el-checkbox label="国基" name="subType"/>
              <el-checkbox label="非国基" name="subType"/>
            </el-checkbox-group>
            <el-checkbox-group v-model="form.subType" v-else>
              <el-checkbox label="国家采集" name="subType"/>
              <el-checkbox label="省采集" name="subType"/>
              <el-checkbox label="非采集" name="subType"/>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item class="form-label">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button native-type="reset">重置</el-button>
          </el-form-item>

        </el-row>
      </el-form>
    </div>
    <div class="query-action">
      <el-row>
        <el-button plain>导出</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
      </el-row>

    </div>
    <div class="query-result">
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="序号" width="40"/>
        <el-table-column prop="agent" label="医疗机构" width="120"/>
        <el-table-column prop="storage" label="药库"/>
        <el-table-column prop="code" label="产品编号"/>
        <el-table-column prop="name" label="药品名称"/>
        <el-table-column prop="good" label="商品名" width="250"/>
        <el-table-column prop="package" label="包装规格"/>
        <el-table-column prop="producer" label="生产企业"/>
        <el-table-column prop="price" label="价格"/>
        <el-table-column prop="stock" label="库存"/>
        <el-table-column prop="delivery" label="配送单位"/>
        <el-table-column prop="bounds" label="采购库存下限"/>
        <el-table-column prop="yibao_code" label="医保编码"/>
        <el-table-column fixed="right" label="操作" width="140">
          <div>
            <el-button size="small">编辑</el-button>
            <el-button type="primary" size="small">禁用</el-button>
          </div>
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :small=false
            :disabled=false
            :background=true
            layout="total, sizes, prev, pager, next, jumper"
            :total=itemTotal

        />
      </div>
    </div>
    <div class="block">
      <span class="demonstration">日期选择器</span>
      <el-date-picker
          v-model="date"
          type="date"
          placeholder="选择日期"
      />
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="新增机构药品目录">
    <el-form :model="addForm" class="query-header">
      <el-row justify="space-between">
        <el-col :span="10">
          <el-form-item label="医疗机构">
            <el-input v-model="addForm.code" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="药库">
            <el-input v-model="addForm.storage" autocomplete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="药品编码">
            <el-input v-model="addForm.code" autocomplete="off" disabled/>
          </el-form-item>
          <el-form-item label="药品名称" :rules="[
            {
              required: true,
              message: '请输入药品名称',
              trigger: 'blur',
            },
          ]">
            <el-input v-model="addForm.name" autocomplete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "QueryForm"
}
</script>
<script setup>
import {reactive, ref} from "vue";
const date = ref("")
let dialogVisible = ref(false)

const addForm = reactive({
  'code': '',
  'storage': '',
  'number': '',
  'name': ''
})

const form = reactive({
  "agency": '',
  "storage": '',
  'enterprise': '',
  'type': '',
  'classify': '1',
  'subType': [],
  'code': ''
})
const onSubmit = () => {
  console.log(form.classify)
}

const currentPage = ref(1)
const pageSize = ref(100)
const tableData = [
  {
    id: '1',
    agent: '某机构1',
    storage: '西药房',
    code: '666666',
    name: '药品名称123456',
    good: '我是一个商品名',
    package: '10ml*12',
    producer: '某药厂',
    price: '66.66',
    stock: '5',
    delivery: '某某企业',
    bounds: '100',
    yibao_code: '111111',
  },
  {
    id: '2',
    agent: '某机构1',
    storage: '中药房',
    code: '1100',
    name: '商品2',
    good: '我是一个商品名，我的名字很长',
    package: '10ml*12',
    producer: '某药厂2',
    price: '28.66',
    stock: '10',
    delivery: '某某企业',
    bounds: '100',
    yibao_code: '222222'
  },
]
const itemTotal = tableData.length
</script>

<style scoped>

.pagination-block {
  margin-top: 10px;
  float: right;
}

.query-form {

}

.form-label {
  font-weight: bold;
  margin-top: 18px;
}

.query-action {
  margin-top: 5px;
}

.query-header {
  background-color: rgba(135, 206, 250, 0.3);
  border-radius: 5px;
  padding: 5px;
}

.query-result {

}
</style>